<template>
  <div>
    <van-tabs v-model:active="active" swipeable @click-tab="onClickTab">
      <van-tab
        v-for="item in type"
        :key="item._id"
        :title="item.name"
        :name="item._id"
      >
        <div class="container" ref="containerRef">
          <!-- <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          > -->
            <div
              class="col"
              v-for="item1 in accent.slice(0,num)"
              :key="item1._id"
            >
              <dl @click="toDetail(item1._id)" class="column1">
                <dt>
                  <van-image lazy-load :src="item1.img" />
                </dt>
                <dd>
                  <p>{{ item1.title }}</p>
                  <div class="author">
                    <van-image
                      :src="item1.author?.img"
                      alt=""
                      lazy-load
                      round
                    />
                    <span class="name">{{ item1.author?.name }}</span>
                    <img
                      src="../../assets/dianzan.png"
                      style="width: 24px; height: 24px"
                    />
                  </div>
                </dd>
              </dl>
            </div>
            <div>
              <span v-if="loading">加载中……</span>
              <span v-else>加载已完成</span>
            </div>
          <!-- </van-list> -->
        </div>
      </van-tab>
    </van-tabs>
    <van-floating-bubble
      icon="flower-o"
      magnetic="x"
      axis="xy"
      @click="onClick"
    />
  </div>
</template>
<script setup name="Discover">
import { onMounted, ref, watch, reactive } from "vue";
import axios from "../../utils/axios";
import { useRouter } from "vue-router";
const router = useRouter();
const active = ref("662f36cc82bc419e64da202a");
const type = ref([]);
const containerRef = ref(null);
const loading = ref(false);
const finished = ref(false);
const state = reactive({
  cardWidth: 0,
  column: 2,
  gap: 10,
  currentPage: 1,
  accent: [],
  cardPos: [],
  columnHeight: [0, 0],
});
const accent = ref([]);
const num = ref(5);
const typeId = ref("662f36cc82bc419e64da202a");
const onClick = () => {
  router.push("/publish");
};
const onClickTab = ({ name }) => {
  typeId.value = name;
  console.log(typeId.value);
};
const toDetail = (id) => {
  router.push("/detail?id=" + id);
};
const getType = async () => {
  let { data } = await axios.get("typeList");
  console.log(data.data);
  type.value = data.data;
};
const onLoad = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    num.value += 4;
    getAncient();
  }, 2000);
};
window.onscroll=function(){
    if(window.innerHeight+window.scrollY>=document.body.scrollHeight-1){
      loading.value = true
      var time=setTimeout(() => {
        loading.value = false
        num.value += 4
        clearTimeout(time)
      }, 1000);
    }
  }
const getAncient = () => {
  setTimeout(async () => {
    let { data } = await axios.get("/ancientList?type=" + typeId.value);
    accent.value = data.data;
    console.log(state.accent);
    if (accent.value.length >= data.data.total) {
      finished.value = true;
    }
  }, 1000);
}

watch(typeId, (newVal) => {
  if (newVal) {
    getAncient();
  }
});
onMounted(() => {
  getType();
  getAncient();
});
</script>
<style scoped>
.container {
  /* position: relative; */
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.col {
  width:45%;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.col dl dt img {
  width: 100%;
  height: 230px;
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(255, 255, 255, 1);
}
.col dl dd p {
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 20px;
  color: rgb(16, 16, 16);
  font-size: 14px;
  text-align: left;
}

.author {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: space-between; /* 修改为space-between以正确对齐元素 */
  align-items: center;
}

.author .van-image {
  width: 30px;
  height: 30px;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 1);
}

.author .name {
  width: auto; /* 修改宽度为auto，以便文本自适应 */
  height: 18px;
  line-height: 18px;
  color: rgb(154, 154, 154);
  font-size: 13px;
  text-align: left;
}
</style>
